<template>
  <div>
    <!-- 头部卡片展示 -->
    <div class="header-view">
      <div class="head-left">
        <div class="head-left-title">个人博客</div>
        <div>
          <div>用代码编织美好生活</div>
        </div>
      </div>

      <div class="add-blog" @click="addblog">
        <img src="../../lib/icon/add.png" alt="" style="width: 22px" />新增文章
      </div>

      <div class="head-right-img">
        <img src="../../lib/image/home/headnavbg.png" alt="" />
      </div>
    </div>
    <!-- 主页展示 -->
    <el-row :gutter="10" style="padding: 10px">
      <el-col :sm="12" :md="6" v-for="(item, index) in blogList" :key="index">
        <div class="main-item" @click="goToBlogDetail(item)">
          <!-- 文章封面文章 -->
          <div class="blog-imte">
            <img :src="item.coverIamge" alt="" />
          </div>
          <!-- 底部文字描述 -->
          <div class="blog-item-bottom">
            <div>{{ item.createTime }}</div>
            <div>{{ item.title }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 底部分页按钮 -->
    <div class="botton-page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="8"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getCoolePage } from "../../util/time";
export default {
  data() {
    return {
      blogList: [],
      currentPage1: 1,
      total: 10,
    };
  },
  mounted() {
    this.getAllBlog();
  },
  methods: {
    // 查询所有博客
    getAllBlog() {
      // 公共查询数据库方法
      getCoolePage("myBlogList", this.currentPage1, 8, {}, "createTime").then(
        (res) => {
          console.log(res, "info");
          this.blogList = res.data;
          this.total = res.total;
        }
      );
    },
    // 添加博客
    addblog() {
      this.$router.push({ path: "/personal/addblog" });
    },
    // 跳转至博客详情页
    goToBlogDetail(item) {
      console.log(item._id);
      this.$router.push({ path: "/personal/blogDetail?id=" + item._id });
    },
    handleCurrentChange(val) {
      this.currentPage1 = val;
      this.getAllBlog();
    },
  },
};
</script>

<style scoped>
.botton-page {
  text-align: center;
  background-color: white;
  margin: -10px 10px;
}
.header-view {
  position: relative;
  margin-top: 5px;
  height: 20vh;
  background-color: white;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head-left {
  margin-left: 3%;
}
.head-left-title {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}
.head-left-desc {
  font-size: 14px;
  color: 2f2f2f;
}
.head-right-img {
  width: 164px;
  margin-right: 3%;
}
.head-right-img > img {
  width: 100%;
  height: 70%;
}
.main-item {
  height: 220px;
  background-color: white;
  border-radius: 2px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}
.blog-imte {
  width: 100%;
  height: 150px;
}
.blog-imte > img {
  width: 100%;
  height: 100%;
}
.blog-item-bottom {
  height: 70px;
  padding: 5px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.blog-item-bottom > div:nth-child(1) {
  font-size: 10px;
}
.blog-item-bottom > div:nth-child(2) {
  font-weight: 700;
  margin-top: 5px;
}
.add-blog {
  display: flex;
  position: absolute;
  right: 233px;
  top: 76px;
  cursor: pointer;
}

@media screen and (max-width: 414px) {
  .header-view {
    display: none;
  }
}
</style>